<template>
	<!-- 热点排行 -->
	<div class="hotspot">
		<p class="newtitle">
			<span class="iconfont icon-a-Firehuore"></span>
			<span>热点排行</span>
		</p>
		<ul class="ulList">
			<li v-for="(item,index) in records" class="flowHidden lilist mhover">
				<div v-if="index==0" class="flex">
					<div class="sort sort1">
						{{index + 1}}
					</div>
					<a class="block_a" :href="Path + item.url" target="_blank">
						<div class="imgbox">
								<span class="p1">{{item.title}}</span>
								<img :src="getImgPath(item.headImag)" alt="" class="img1 pic_width">
						</div>
					</a>
				</div>
				<div v-if="index!=0" class="flex hostimg">
					<div class="sort sort2" :class="index==1?'sort2':index==2?'sort3':'sort4'">
						{{index + 1}}
					</div>
					<a class="block_a" :href="Path + item.url" target="_blank">
						<div class="imageText">
								<span class="p2 mhover">{{item.title}}</span>
								<span class='img2_content'>
									<img :src="getImgPath(item.headImag)" alt="" class="img2">
								</span>
								
						</div>
					</a>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				params:{
					pageSize: 5,
					pageNum:1,
					orderBy:5
				},
				records:[],
				Path: getRootPath(),
			}
		},
		mounted() {
			this.hotSort()
		},
		methods:{
			hotSort(){
				contentApi.fetchContentSearchPage(this.params, (res) => {
					if (res.code == "00000 00000") {
						this.records = res.data.contentPage.records
					} else {
				
					}
				})
			},
			changes(){
				this.params.pageNum=this.params.pageNum==1?2:1
				this.hotSort()
			},
			getImgPath(url){
				return imgPath(url);
			},
		}
	}
</script>


<style>
	.hotspot {
	  width: 320px;
	}
	.hotspot .newtitle {
	  height: 20px;
	  font-size: 20px;
	  font-family: PingFang SC-Semibold, PingFang SC;
	  font-weight: 600;
	  color: #333333;
	  line-height: 20px;
		text-align: center;
		position: relative;
	}
	.hotspot .newtitle:after{
		width: 82px;
		content: '';
		height: 1px;
		background-color: #EFEFEF;
		position: absolute;
		z-index: 1;
		left: 0;
		top: 8px;
	}
	.hotspot .newtitle:before{
		width: 82px;
		content: '';
		height: 1px;
		background-color: #EFEFEF;
		position: absolute;
		z-index: 1;
		right: 0;
		top: 8px;
	}
	.hotspot .iconfont {
	  color: #333;
		font-size: 20px;
		margin-right: 8px;
	}
	.hotspot .ulList {
	  margin-top: 24px;
	}
	.hotspot .ulList .lilist .sort {
	  width: 26px;
	  text-align: center;
	  height: 24px;
	  font-size: 24px;
	  font-family: PingFang SC-Semibold, PingFang SC;
	  font-weight: 600;
	  color: #D21800;
	  line-height: 24px;
	}
	.hotspot .ulList .lilist .sort2 {
	  color: #FF3333;
	}
	.hotspot .ulList .lilist .sort3 {
	  color: #FF9A03;
	}
	.hotspot .ulList .lilist .sort4 {
	  color: #999999;
	}
	.hotspot .ulList .lilist .imgbox {
	  width: 270px;
	  height: 152px;
	  margin-left: 24px;
	  position: relative;
		overflow: hidden;
	}
	.hotspot .ulList .lilist .imgbox .img1 {
	  width: 270px;
	  height: 152px;
	  width: auto;
	  height: auto;
	  margin: auto;
	  object-fit: cover;
		
	}
	.hotspot .ulList .lilist .imgbox .img1:hover {
	  transform: scale(1.1);
	}
	.hotspot .ulList .lilist .imgbox .p1 {
	     width: 100%;
	     height: 76px;
	     display: inline-block;
	     position: absolute;
	     bottom: 0px;
	     padding: 0 24px 11px;
	     font-size: 16px;
	     font-family: PingFang SC-Regular, PingFang SC;
	     font-weight: 400;
	     color: #ffffff;
	     background: linear-gradient(360deg, #111111 0%, rgba(17,17,17,0) 100%);
	     z-index: 1;
	     box-sizing: border-box;
	     line-height: 110px;
	     overflow: hidden;
	     text-overflow: ellipsis;
	     white-space: nowrap;
	}
	.hotspot .ulList .lilist .hostimg {
	  margin-top: 24px;
	}
	.hotspot .ulList .lilist .imageText {
	  margin-left: 24px;
	  display: flex;
		overflow: hidden;
	}
	.hotspot .ulList .lilist .imageText .p2 {
	  display: inline-block;
	  width: 134px;
	  height: 68px;
	  font-size: 16px;
	  font-family: PingFang SC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #333333;
	  line-height: 24px;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  -webkit-line-clamp: 3;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  white-space: pre-wrap;
	}
	.hotspot .ulList .lilist .imageText .img2_content{
		width: 120px;
		height: 68px;
		overflow: hidden;
		margin-left: 16px;
	}
	.hotspot .ulList .lilist .imageText .img2 {
	  width: 120px;
	  height: 68px;
	  border-radius: 4px;
	  opacity: 1;
	  object-fit: cover;
	}
	.hotspot .ulList .lilist .imageText .img2:hover {
	  transform: scale(1.1);
	}

</style>